!-- 蓝色登录页面2 -->
<template>
	<view>
		<u-toast ref="uToast" />
		<view class="img-a">
			<view class="t-b">
				您好，
				<br />
				欢迎使用 粤安教育学习平台
			</view>
		</view>
		<view class="login-view">
			<view class="t-login">
				<form class="cl">
					<view class="t-a">
						<text class="txt">账号</text>
						<input type="number" name="phone" placeholder="请输入用户名/手机号" maxlength="11" v-model="username" />
					</view>
					<view class="t-a">
						<text class="txt">密码</text>
						<input type="password" name="code" maxlength="18" placeholder="请输入您的密码" v-model="password" />
					</view>
					<button @tap="login()">登 录</button>
					<!-- <view class="reg" @tap="reg()">短信登录</view> -->
				</form>
			</view>
		</view>
		
		<!-- #ifdef MP-WEIXIN -->  
		<view class="buttom">
			<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="clearBtn">
				<view class="loginType">
					<view class="item">
						<view class="icon">
							<image src="../../static/login/wx.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
						</view>
						快捷登录
					</view>
				</view>
			</button>
			<view class="hint">
				登录代表同意
				<text class="link">粤安教育用户协议、隐私政策，</text>
				并授权使用您的账号信息（如昵称、头像、收获地址）以便您统一管理
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>
<script>
	import {
		fetchGetPhone
	} from '@/services/user.js';
	import Config from '@/config/index.js';
	import store from '@/store/index.js'
	import {
		mapGetters
	} from 'vuex'	
export default {
	data() {
		return {
			username: '',
			password: '',
			canIUseAuthButton: true
		}
	},
	computed: {
		isLogin() {
			return store.state.user.isLogin
		} 
	},
	create() {
		// #ifdef MP-ALIPAY
		this.canIUseAuthButton = my.canIUse('button.open-type.getAuthorize');
		// #endif
	},
	onLoad() {
		// // 在页面中定义激励视频广告
		// let videoAd = null
		// // 在页面onLoad回调事件中创建激励视频广告实例
		// if (wx.createRewardedVideoAd) {
		//   videoAd = wx.createRewardedVideoAd({
		//     adUnitId: 'adunit-8cd5789a01a51891'
		//   })
		//   videoAd.onLoad(() => {})
		//   videoAd.onError((err) => {})
		//   videoAd.onClose((res) => {})
		// }
		// // 用户触发广告后，显示激励视频广告
		// if (videoAd) {
		//   videoAd.show().catch(() => {
		//     // 失败重试
		//     videoAd.load()
		//       .then(() => videoAd.show())
		//       .catch(err => {
		//         console.log('激励视频 广告显示失败')
		//       })
		//   })
		// }
	},
	methods: {
		login() {
			uni.showToast({
				title: '账号密码或错误!',
				icon: 'none'
			})
			// if (this.isAccountLogin && (!this.principal || !util.checkUserName(this.principal))) {
			//   this.errorTips = 1
			//   return
			// }
			// if (this.isAccountLogin && !this.credentials) {
			//   this.errorTips = 2
			//   return
			// }
			// if (!this.isAccountLogin && !this.principal) {
			//   this.errorTips = 3
			//   return
			// }
			// if (!this.isAccountLogin && !util.checkPhoneNumber(this.principal)) {
			//   this.errorTips = 4
			//   return
			// }
			// if (!this.isAccountLogin && !this.captchaVerification) {
			//   this.errorTips = 5
			//   return
			// }
			// this.errorTips = 0
			// var params = {
			//   url: '/micro-cloud-auth/ua/login',
			//   method: 'POST',
			//   data: {
			//     principal: this.principal,
			//     credentials: this.credentials,
			//     captchaVerification: this.captchaVerification,
			//     sysType: this.sysType
			//   },
			//   callBack: res => {
			//     uni.setStorageSync('token', res.accessToken)
			//     uni.setStorageSync('loginResult', res) // 保存整个登录数据
			//     uni.reLaunch({ // 关闭所有页面，打开首页
			//       url: '/pages/index/index'
			//     })
			//   }
			// }
			// http.request(params)
		},
		async getPhoneNumber({
			detail
		}) {
			const { token } = await fetchGetPhone({
				code: detail.code
			})
			if(token) {
				this.$store.commit('setLoginState', true)
				uni.setStorageSync('token', token)
				uni.setStorageSync('isLogin', true) 
				uni.showToast({
					title: '登录成功',
					icon: 'none'
				})
				uni.switchTab({
					url: '/pages/index/index'
				});
				this.$emit('loginSucess');
			}
		},
		reg(){
			this.$u.route({
				url: 'pages/login/account'
			})
		}
	}
};
</script>


<style>
page {
  background-color: #ffffff;
}
</style>
<style lang="scss" scoped>
.txt {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}
.img-a {
	width: 100%;
	height: 450rpx;
	background-image: url(https://zhoukaiwen.com/img/loginImg/head.png);
	background-size: 100%;
}
.reg {
	font-size: 28rpx;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	font-weight: bold;
	background: #f5f6fa;
	color: #000000;
	text-align: center;
	margin-top: 30rpx;
}

.login-view {
	width: 100%;
	position: relative;
	margin-top: -120rpx;
	background-color: #ffffff;
	border-radius: 8% 8% 0% 0;
}

.t-login {
	width: 600rpx;
	margin: 0 auto;
	font-size: 28rpx;
	padding-top: 80rpx;
}

.t-login button {
	font-size: 28rpx;
	background: #2796f2;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	font-weight: bold;
}

.t-login input {
	height: 90rpx;
	line-height: 90rpx;
	margin-bottom: 50rpx;
	border-bottom: 1px solid #e9e9e9;
	font-size: 28rpx;
}

.t-login .t-a {
	position: relative;
}

.t-b {
	text-align: left;
	font-size: 42rpx;
	color: #ffffff;
	padding: 130rpx 0 0 70rpx;
	font-weight: bold;
	line-height: 70rpx;
}

.t-login .t-c {
	position: absolute;
	right: 22rpx;
	top: 22rpx;
	background: #5677fc;
	color: #fff;
	font-size: 24rpx;
	border-radius: 50rpx;
	height: 50rpx;
	line-height: 50rpx;
	padding: 0 25rpx;
}

.t-login .t-d {
	text-align: center;
	color: #999;
	margin: 80rpx 0;
}

.t-login .t-e {
	text-align: center;
	width: 250rpx;
	margin: 80rpx auto 0;
}

.t-login .t-g {
	float: left;
	width: 50%;
}

.t-login .t-e image {
	width: 50rpx;
	height: 50rpx;
}

.t-login .t-f {
	text-align: center;
	margin: 150rpx 0 0 0;
	color: #666;
}

.t-login .t-f text {
	margin-left: 20rpx;
	color: #aaaaaa;
	font-size: 27rpx;
}

.t-login .uni-input-placeholder {
	color: #aeaeae;
}

.cl {
	zoom: 1;
}

.cl:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: '\20';
}

.buttom {
	.loginType {
		display: flex;
		padding: 140rpx 0;
		justify-content:center;
		
		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			color:  #909399;
			font-size: 22rpx;
		}
	}
	
	.hint {
		position: absolute;
		bottom: 0;
		padding: 20rpx 40rpx;
		font-size: 20rpx;
		color:  #909399;
		
		.link {
			color: #2979ff;
		}
	}
}

.clearBtn{
	margin:0;
	padding: 0;
	line-height: 1;
	background-color: #FFFFFF;
}

.clearBtn::after{
	position: unset !important;
	border: unset;
}
</style>